<!--
 * @Description: 接触网安全生产
 * @Author: Huang Junjie
 * @Date: 2021-06-15 10:52:01
 * @LastEditTime: 2021-08-06 15:24:54
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="content-div app-container v-flex">
    <!-- 顶部操作栏 -->
    <div class="top-operation">
      <filter-form
        :form="listQuery"
        :data="filterData"
        :has-default-operation="false">
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-search"
          @click="search">查询</el-button>
        <el-button
          class="refresh-btn"
          size="mini"
          type="primary"
          icon="el-icon-refresh"
          @click="resetListQuery">重置</el-button>
        <el-button
          v-permission-button="'ITPS-ADD'"
          class="operation-btn"
          size="mini"
          icon="el-icon-plus"
          @click="addForm">新增</el-button>
      </filter-form>
    </div>
    <!-- 顶部操作栏 -->

    <!-- 表格 -->
    <div ref="main" class="v-flex-elastic">
      <base-table
        v-show="!popup.visible"
        :height="height"
        :loading="tableData.loading"
        :data="tableData.tableList"
        :columns="tableData.columns"
        :show-index="tableData.showIndex"
        :show-selection="tableData.showSelection"
        :show-operation="tableData.showOperation"
        :show-filter-column="tableData.showFilterColumn"
        :operaton-width="tableData.operatonWidth"
        :default-operations="tableData.defaultOperations"
        :has-auth="tableData.hasAuth"
        :row-show-color="tableData.rowShowColor"
        @view="openViewFillInPopup"
        @updateForm="openEditFillInPopup" />
    </div>
    <!-- 表格 -->

    <!-- 分页 -->
    <div class="page-box">
      <pagination
        :total="tableData.total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="changePageOption" />
    </div>
    <!-- 分页 -->

    <!-- 添加日报组件 -->
    <add-daily :dialog="dialog" @updateData="updateData" />
    <!-- 添加日报组件 -->

    <!-- 填写窗口组件 -->
    <fill-in-popup :popup="popup" @updateData="fillInPopupUpdateData" />
    <!-- 填写窗口组件 -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { findManageDeptTree } from '@/api/main'
import { getListPage, addOrEditData } from '@/api/jcwsc/production-daily/catenary-safety-production'
import { tableMixin } from '@/utils/public'
import AddDaily from './components/AddDaily'
import FillInPopup from './components/FillInPopup'

export default {
  name: 'CatenarySafetyProduction',
  components: {
    AddDaily,
    FillInPopup
  },
  mixins: [tableMixin],
  data() {
    return {
      // 表格高度
      height: 0,

      // 顶部操作栏配置
      filterData: {
        uploadDate: {
          key: 'uploadDate',
          type: 'date',
          title: '日期',
          placeholder: '请选择日期',
          valueFormat: 'yyyy-MM-dd'
        },
        uploadDeptId: {
          clearable: false,
          key: 'uploadDeptId',
          type: 'selectTree',
          title: '部门',
          placeholder: '请选择部门',
          options: [],
          props: {
            label: 'label',
            value: 'id',
            parent: 'parentId',
            children: 'children'
          }
        },
        isSubmit: {
          key: 'isSubmit',
          type: 'select',
          title: '状态',
          placeholder: '请选择状态',
          options: [
            { name: '已提报', value: 'YES' },
            { name: '编制中', value: 'NO' },
            { name: '驳回', value: 'EXIT' }
          ],
          props: { label: 'name', value: 'value' }
        }
      },

      // 查询列表请求参数
      listQuery: {
        dailyType: 'JCW',
        uploadDate: '',
        uploadDeptId: '',
        isSubmit: '',
        page: 1,
        size: 20
      },

      // 表格数组
      tableData: {
        loading: false,
        tableList: [],
        total: 0,
        columns: [
          { prop: 'uploadDate', label: '上报日期' },
          { prop: 'deptName', label: '填报部门' },
          { prop: 'uploadPerson', label: '填报人' },
          { prop: 'isSubmitText', label: '状态' }
        ],
        showIndex: true,
        showSelection: false,
        showOperation: true,
        showFilterColumn: true,
        operatonWidth: '160px',
        defaultOperations: ['view', 'edit'],
        hasAuth: true,
        rowShowColor: { name: 'name', value: 0 }
      },

      // 添加/编辑弹框参数
      dialog: {
        title: '',
        type: '',
        visible: false,
        disabled: false,
        loading: false,
        dataList: {
          deptTreeArr: []
        },
        form: {
          uploadDeptId: '',
          uploadDate: ''
        },
        rules: {
          uploadDeptId: [{ required: true, message: '必填', trigger: 'blur' }],
          uploadDate: [{ required: true, message: '必填', trigger: 'blur' }]
        }
      },

      // 填写窗口参数
      popup: {
        title: '',
        type: '',
        visible: false,
        loading: false,
        params: {},
        uploadDate: '',
        index: null
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  activated() {
    this.popup.visible = false
    this.getList() // 获取下拉数据、字典
    this.getListPage() // 查询信息列表
  },
  methods: {
    // 获取下拉数据、字典
    getList() {
      findManageDeptTree().then(res => {
        const resData = res.data
        // 控制单位不可选择
        for (const i of resData) {
          if (i.obj.unitFlag === 1) { // unitFlag: 1 为单位
            i['disabled'] = true
          }
        }
        this.dialog.dataList.deptTreeArr = resData
        this.filterData.uploadDeptId.options = resData
      })
    },

    // 查询信息列表
    getListPage() {
      this.tableData.loading = true
      getListPage(this.listQuery).then(response => {
        this.tableData.tableList = response.data.records
        this.tableData.total = response.data.total
        this.tableData.loading = false
      }).catch(() => {
        this.tableData.loading = false
      })
    },

    // 新增
    addForm() {
      const dialog = {
        title: '添加日报',
        type: 'add',
        visible: true,
        disabled: false,
        loading: false,
        dataList: {
          deptTreeArr: this.dialog.dataList.deptTreeArr
        },
        form: {
          uploadDeptId: this.userInfo.deptId,
          uploadDate: new Date()
        }
      }
      this.dialog = Object.assign(this.dialog, dialog)
    },

    // 新增或编辑弹框$emit 回调方法
    updateData(formData) {
      const params = {
        dailyType: 'JCW',
        uploadDate: formData.uploadDate,
        uploadDeptId: formData.uploadDeptId
      }
      addOrEditData(params).then((response) => {
        this.currentRow = [response.data]
        if (this.dialog.type === 'add') {
          this.tableData.tableList.unshift(this.currentRow[0])
          this.tableData.total++
          this.notifiySuccess('添加成功')
          var dialog = this.dialog
          dialog.form.id = response.data.id
          this.dialog = Object.assign(this.dialog, dialog)
          this.dialog.loading = false
          this.dialog.visible = false

          const popup = {
            title: `${response.data.uploadDate + ' ' + response.data.deptName} 接触网生产日报`,
            type: 'edit',
            visible: true,
            loading: false,
            params: {
              deptCode: response.data.mCode,
              mainId: response.data.id,
              jcwRepair: {
                filterIsSubmit: '',
                planDate: response.data.uploadDate
              },
              mulInspect: {
                filterIsSubmit: '',
                inspectDate: response.data.uploadDate
              },
              jcwTempRepair: {
                filterIsSubmit: '',
                planDate: response.data.uploadDate
              },
              otherProblem: {
                filterIsSubmit: '',
                happenDate: response.data.uploadDate
              }
            },
            uploadDate: response.data.uploadDate,
            index: 0
          }
          this.popup = Object.assign(this.popup, popup)
        }
      }).catch(() => {
        this.dialog.loading = false
      })
    },

    // 打开查看填写popup
    openViewFillInPopup(row) {
      const popup = {
        title: `${row.uploadDate + ' ' + row.deptName} 接触网生产日报`,
        type: 'view',
        visible: true,
        loading: false,
        params: {
          deptCode: row.mCode,
          mainId: row.id,
          jcwRepair: {
            filterIsSubmit: '',
            planDate: row.uploadDate
          },
          mulInspect: {
            filterIsSubmit: '',
            inspectDate: row.uploadDate
          },
          jcwTempRepair: {
            filterIsSubmit: '',
            planDate: row.uploadDate
          },
          otherProblem: {
            filterIsSubmit: '',
            happenDate: row.uploadDate
          }
        },
        uploadDate: row.uploadDate,
        index: null
      }
      this.popup = Object.assign(this.popup, popup)
    },

    // 打开修改填写popup
    openEditFillInPopup(row, index) {
      const popup = {
        title: `${row.uploadDate + ' ' + row.deptName} 接触网生产日报`,
        type: 'edit',
        visible: true,
        loading: false,
        params: {
          deptCode: row.mCode,
          mainId: row.id,
          jcwRepair: {
            filterIsSubmit: '',
            planDate: row.uploadDate
          },
          mulInspect: {
            filterIsSubmit: '',
            inspectDate: row.uploadDate
          },
          jcwTempRepair: {
            filterIsSubmit: '',
            planDate: row.uploadDate
          },
          otherProblem: {
            filterIsSubmit: '',
            happenDate: row.uploadDate
          }
        },
        uploadDate: row.uploadDate,
        index: index === undefined ? null : index
      }
      this.popup = Object.assign(this.popup, popup)
    },

    // 新增或编辑popup窗口$emit 回调方法
    fillInPopupUpdateData(res) {
      this.notifiySuccess('一键上报成功！')
      if (this.popup.type === 'add') {
        this.tableData.tableList.unshift(res)
      } else if (this.popup.type === 'edit') {
        this.$set(this.tableData.tableList, this.popup.index, res)
      }
      this.popup.visible = false
    },

    // 搜索
    search() {
      this.listQuery.page = 1
      this.getListPage() // 查询信息列表
    },

    // 改变分页配置
    changePageOption(data) {
      this.listQuery.page = data.page
      this.listQuery.size = data.size
      this.getListPage() // 查询信息列表
    },

    // 重置查询
    resetListQuery() {
      this.listQuery = {
        dailyType: 'JCW',
        uploadDate: '',
        uploadDeptId: '',
        isSubmit: '',
        page: 1,
        size: 20
      }
      this.getListPage() // 查询信息列表
    }
  }
}
</script>

<style lang="scss" scoped>
.content-div {
  position: relative;
}
</style>
